<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '阅前导读',
	},
}
</route>

<template>
	<view class="page-resource">
		<fly-navbar
			:leftText="bookResourceInfo?.book_name ? `《${bookResourceInfo?.book_name}》` : '阅前导读'"
			fixed
		/>
		<view class="w-full px-[33rpx] py-4 box-border" v-if="pageInfo.thisPage === 1">
			<view class="w-full" v-if="query?.ext == 1">
				<!-- 视频 -->
				<view
					class="h-[63rpx] px-[25rpx] rounded-[30rpx] text-[#303030] text-[29rpx] w-fit flex justify-center items-center"
					style="background: #f3f3f5"
				>
					{{ bookResourceInfo.book_resource_classify_name
					}}<text class="text-[23rpx] text-[#34A4E2]">({{ bookResourceInfo.resource_count }})</text>
				</view>

				<view class="w-full mt-[17rpx]">
					<video
						:id="bookResourceInfo.resource_list[current].id"
						class="w-full h-[361rpx] rounded-[30rpx] mb-[29rpx]"
						object-fit="fill"
						:src="bookResourceInfo.resource_list[current].file_url"
					></video>
					<view
						class="w-full flex justify-between items-center mb-[22rpx] last:mb-0"
						v-for="(item, index) in bookResourceInfo.resource_list"
						:key="item.id"
						@tap="setCurrent(index)"
					>
						<image
							class="w-[236rpx] h-[152rpx] rounded-[30rpx]"
							:style="{
								border: current === index ? '2rpx solid #3CA4E4' : '2rpx solid transparent',
							}"
							:src="item.file_cover_img_url"
						></image>
						<video
							:id="item.id"
							:src="item.file_url"
							v-show="false"
							@loadedmetadata="e => loadedmetaVideo(e, index)"
						></video>
						<view
							class="flex-1 h-[152rpx] flex flex-col justify-between py-[20rpx] px-[22rpx] box-border"
						>
							<view
								class="text-[26rpx] flex items-center"
								:style="{ color: current === index ? '#34A4E2' : '#303030' }"
								><text class="triangle" v-if="current === index"></text>{{ item.title }}</view
							>
							<text class="text-[#919191] text-[25rpx]">{{
								formatTime(item.duration, `m:s`, false)
							}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="w-full" v-if="query?.ext == 2">
				<!-- 音乐 -->
				<view
					class="h-[63rpx] px-[25rpx] rounded-[30rpx] text-[#303030] text-[29rpx] w-fit flex justify-center items-center"
					style="background: #f3f3f5"
				>
					{{ bookResourceInfo.book_resource_classify_name
					}}<text class="text-[23rpx] text-[#34A4E2]">({{ bookResourceInfo.resource_count }})</text>
				</view>
				<view class="w-full mt-[17rpx]">
					<view
						class="w-full px-[27rpx] py-[25rpx] box-border flex justify-between items-center mb-[19rpx] last:mb-0 rounded-[30rpx]"
						style="background: #f9f9fb"
						v-for="(item, index) in bookResourceInfo.resource_list"
						:key="item.id"
						@tap="setCurrent(index)"
					>
						<view class="flex-1 pr-[38rpx] box-border" v-if="current !== index">
							<view
								class="text-[26rpx] mt-[13rpx]"
								:style="{ color: current === index ? '#34A4E2' : '#303030' }"
								>{{ item.title }}</view
							>
							<view class="text-[#919191] text-[25rpx] mt-[20rpx]">{{
								formatTime(item.duration, `m:s`, false)
							}}</view>
						</view>
						<view class="flex-1" v-else>
							<view
								class="text-[26rpx] mt-[13rpx]"
								:style="{ color: current === index ? '#34A4E2' : '#303030' }"
								>{{ item.title }}</view
							>
							<view class="w-full mt-[31rpx]">
								<my-audio :src="item.file_url" :autoPlay="true"></my-audio>
							</view>
						</view>
						<image
							v-if="current !== index"
							class="w-[59rpx] h-[59rpx]"
							:src="baseImg + '/resource-audio.png'"
						></image>
					</view>
				</view>
			</view>
			<view class="w-full" v-if="query?.ext == 4">
				<!-- 图片 -->
				<view
					class="h-[63rpx] px-[25rpx] rounded-[30rpx] text-[#303030] text-[29rpx] w-fit flex justify-center items-center"
					style="background: #f3f3f5"
				>
					{{ bookResourceInfo.book_resource_classify_name
					}}<text class="text-[23rpx] text-[#34A4E2]">({{ bookResourceInfo.resource_count }})</text>
				</view>

				<view class="w-full grid grid-cols-2 gap-x-[27rpx] gap-y-[27rpx] mt-[17rpx]">
					<view
						class="w-full flex flex-col justify-center items-center"
						v-for="(item, index) in bookResourceInfo.resource_list"
						:key="item.id"
					>
						<image
							class="w-full h-[326rpx] rounded-[30rpx]"
							@tap="enlargePicture(index)"
							:src="item.file_url"
						></image>
						<text class="text-[#303030] text-[26rpx] mt-[13rpx]">{{ item.title }}</text>
					</view>
				</view>
			</view>
			<view class="w-full" v-if="query?.ext == 8">
				<!-- 文档 -->
				<view
					class="h-[63rpx] px-[25rpx] rounded-[30rpx] text-[#303030] text-[29rpx] w-fit flex justify-center items-center"
					style="background: #f3f3f5"
				>
					{{ bookResourceInfo.book_resource_classify_name
					}}<text class="text-[23rpx] text-[#34A4E2]">({{ bookResourceInfo.resource_count }})</text>
				</view>
				<view class="w-full mt-[17rpx]">
					<view
						v-for="item in bookResourceInfo.resource_list"
						:key="item.id"
						class="w-full px-[27rpx] py-[25rpx] box-border flex justify-between items-center mb-[19rpx] last:mb-0 rounded-[30rpx]"
						style="background: #f9f9fb"
						@tap="toWeb(item.file_url)"
					>
						<view class="flex-1">
							<view class="text-[26rpx] text-[#303030]">{{ item.title }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<no-page
			v-if="pageInfo.thisPage === 0"
			:type="pageInfo.type"
			:title="pageInfo.title"
			:btnTitle="pageInfo.btnTitle"
			@click="retry"
		></no-page>
	</view>
</template>

<script lang="ts" setup>
import { formatTime } from '@/utils';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store';
import { toAuthPage } from '@/utils/jump';
import { getBookResource } from '@/service/book';
import onShare from '@/hooks/useShare';
import MyAudio from '../../components/my-audio.vue';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();
const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const bookResourceInfo = ref(null);
const query = ref(null);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const opionforJump = ref(null);;
const pageInfo = ref<{ thisPage: number; title: string; type: string; btnTitle?: string }>({
	thisPage: -1,
	title: '暂无数据',
	type: 'btn',
	btnTitle: '重试',
});
const current = ref(-1);

onLoad(options => {
	// console.log('未分享options',options);
	opionforJump.value = options;
	if (!userInfo.value.student_id) {
		// 分享或者进入未登录
		pageInfo.value = {
			thisPage: 0,
			type: 'btn',
			title: '还没有登录',
			btnTitle: '登录',
		};
		uni.hideShareMenu({ hideShareItems: ['qq', 'qzone'] });
		return;
	}
	// ext 1 2 4 8, 视频, 音乐, 图片 文档
	if (options.resource_id) {
		query.value = options;
		if (options.ext === '1') {
			current.value = 0;
		}
	} else {
		console.log('查询异常');	
		pageInfo.value = {
			thisPage: 0,
			title: '查询异常',
			type: 'msg',
		};
	}
});

onShow(() => {
	if (query.value.resource_id) {
		getInfo();
	}
});

const toWeb = (url: string) => {
	switch (uni.getSystemInfoSync().platform) {
		case 'android':
			// 这里直接调用原生的方法，我们上面定义的
			androidOpenPdf(url);
			break;
		case 'ios':
			// 这里跳转web-view页面
			uni.setStorageSync('webInfo', {
				url,
				title: bookResourceInfo.value?.book_name
					? `《${bookResourceInfo.value?.book_name}》`
					: '《阅前导读》',
			});
			uni.navigateTo({
				url: '/pages/web-view/index',
			});
			break;
		default:
			androidOpenPdf(url);
			break;
	}
};

const androidOpenPdf = (url: string) => {
	uni.downloadFile({
		url,
		success(res) {
			const filePath = res.tempFilePath;
			uni.openDocument({
				filePath,
			});
		},
	});
};

const getInfo = async () => {
	uni.showLoading({
		title: '加载中...',
	});
	try {
		const res = await getBookResource({
			book_id: query.value.book_id,
			resource_classify_id: query.value.resource_id,
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			pageInfo.value.thisPage = 1;
			bookResourceInfo.value = res.data;
		} else {
			uni.showToast({
				icon: 'none',
				title: res.status_code !== 200 ? res.message : '查询异常,请重试',
			});
			pageInfo.value = {
				thisPage: 0,
				title: res.status_code !== 200 ? res.message : '查询异常,请重试',
				type: 'btn',
			};
		}
	} catch (error) {
		uni.hideLoading();
		pageInfo.value = {
			thisPage: 0,
			title: '查询异常,请重试',
			type: 'btn',
		};
		uni.showToast({
			icon: 'none',
			title: '查询异常,请重试',
		});
	}
};

const retry = () => {
	if (!userInfo.value.student_id) {
		// 分享或者进入未登录
		// console.log(query.value);
		// if(opionforJump.value) {
		// 	toAuthPage(opionforJump.value, { type: 'redirectTo', url: '/pages-book/resource/details/index'});
		// } else {
			
		// }
		toAuthPage({}, { type: 'redirectTo', url: '/pages/index/index' });
		return;
	}
	getInfo();
};

const setCurrent = (index: number) => {
	current.value = index;
};

// 获取视频时长
const loadedmetaVideo = (e, index) => {
	bookResourceInfo.value.resource_list[index].duration = !bookResourceInfo.value.resource_list[
		index
	].duration
		? e.detail.duration
		: bookResourceInfo.value.resource_list[index].duration;
};

// 图片预览
const enlargePicture = (index: number) => {
	uni.previewImage({
		loop: true,
		urls: bookResourceInfo.value.resource_list.map(item => item.file_url),
		current: index,
	});
};
</script>

<style lang="scss" scoped>
.triangle {
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: 3rpx;
	border-top: 10rpx solid transparent;
	border-right: 10rpx solid transparent;
	border-bottom: 10rpx solid transparent;
	border-left: 10rpx solid #3ba4e4;
}
</style>
